<template>
  <div id="selectStep" v-loading="showstepLoading">
    <table class="mytable" cellspacing="0" cellpadding="0">
      <tr>
        <th v-for="(item,index) in allStep" :key="index" :colspan="item.children?item.children.length:1" :rowspan="item.children?1:2">{{item.step}}</th>
      </tr>
      <tr>
        <template v-for="item in allStep">
          <template v-if="item.children">
            <th v-for="(it,idx) in item.children" :key="idx">{{it.step}}</th>
          </template>
        </template>
      </tr>
      <tr>
        <template v-for="(item,index) in allStep">
          <template v-if="item.children">
            <td v-for="(it,idx) in item.children" :key="index+'-'+idx" style="text-align:center">
              <el-checkbox v-if="!readonly" v-model="steps[it.col]" :disabled="!(!steps2[it.col]||steps2[it.col]===-1)"></el-checkbox>
              <el-tooltip v-else :content="steps[it.col]?'该环节需要办理':'该环节无需办理'" placement="top">
                <i :class="steps[it.col]?'state_icon icon_c_2':'state_icon icon_c_-1'"></i>
              </el-tooltip>
            </td>
          </template>
          <td :key="index" v-else style="text-align:center">
            <el-checkbox v-if="!readonly" v-model="steps[item.col]" :disabled="!(!steps2[item.col]||steps2[item.col]===-1)"></el-checkbox>
            <el-tooltip v-else :content="steps[item.col]?'该环节需要办理':'该环节无需办理'" placement="top">
              <i :class="steps[item.col]?'state_icon icon_c_2':'state_icon icon_c_-1'"></i>
            </el-tooltip>
          </td>
        </template>
      </tr>
    </table>
    <el-button v-if="!readonly" @click="selectStepSubmit" type="success" :loading="submitLoading" style="margin:10px">保存</el-button>
  </div>
</template>

<script>
export default {
  props: ['personId', 'changeType', 'readonly'],
  watch: {
    personId: {
      handler (newName, oldName) {
        console.log(newName)
        this.showStep()
      },
      immediate: true
    },
    changeType: {
      handler (newName, oldName) {
        console.log(newName)
        this.showStep()
      },
      immediate: true
    },
    readonly: {
      handler (newName, oldName) {
        console.log(newName)
        this.showStep()
      },
      immediate: true
    }
  },
  data () {
    return {
      showstepLoading: false,
      submitLoading: false,
      steps: {
        id: '',
        'stateCandidateReport': false,
        'stateCadreArchives': false,
        'statePersonalMatters': false,
        'stateSolicitingOpinions': false,
        'stateClueReporting': false,
        'stateRecommend': false,
        'stateExamination': false,
        'stateDecisionMeeting': false,
        'statePublicity': false,
        'stateManageOpinion': false,
        'stateRecord': false,
        'statePostDispatch': false,
        'stateTalkBeforeAppointment': false,
        'stateTalkHonestGovernment': false,
        'stateDeclare': false
      },
      steps2: {
        id: '',
        'stateCandidateReport': '',
        'stateCadreArchives': '',
        'statePersonalMatters': '',
        'stateSolicitingOpinions': '',
        'stateClueReporting': '',
        'stateRecommend': '',
        'stateExamination': '',
        'stateDecisionMeeting': '',
        'statePublicity': '',
        'stateManageOpinion': '',
        'stateRecord': '',
        'statePostDispatch': '',
        'stateTalkBeforeAppointment': '',
        'stateTalkHonestGovernment': '',
        'stateDeclare': ''
      },
      allStep: [
        {
          step: '事前报告',
          col: 'stateCandidateReport'
        },
        {
          step: '凡提四必',
          children: [
            {step: '查核干部档案', col: 'stateCadreArchives'},
            {step: '查核有关事项', col: 'statePersonalMatters'},
            {step: '征求纪检监察部门意见', col: 'stateSolicitingOpinions'},
            {step: '线索举报调查', col: 'stateClueReporting'}
          ]
        },
        {
          step: '民主推荐',
          col: 'stateRecommend'
        },
        {
          step: '考察',
          col: 'stateExamination'
        },
        {
          step: '讨论决定',
          col: 'stateDecisionMeeting'
        },
        {
          step: '公示',
          col: 'statePublicity'
        },
        {
          step: '征求协管方意见',
          col: 'stateManageOpinion'
        },
        {
          step: '报中组部备案',
          col: 'stateRecord'
        },
        {
          step: '任职发文',
          col: 'statePostDispatch'
        },
        {
          step: '任职谈话',
          col: 'stateTalkBeforeAppointment'
        },
        {
          step: '廉政谈话',
          col: 'stateTalkHonestGovernment'
        },
        {
          step: '宣布',
          col: 'stateDeclare'
        }
      ]
    }
  },
  methods: {
    showStep () {
      this.showstepLoading = true
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/busCandidatePerson/getStatesByPerson?id=` + this.personId)
        .then(response => {
          if (response.data.success) {
            if (response.data.result.stateCadreArchives === null || response.data.result.stateCadreArchives === undefined) {
              console.log('null')
              this.steps = {
                id: '',
                stateCandidateReport: false,
                stateCadreArchives: false,
                statePersonalMatters: false,
                stateSolicitingOpinions: false,
                stateClueReporting: false,
                stateRecommend: false,
                stateExamination: false,
                stateDecisionMeeting: false,
                statePublicity: false,
                stateManageOpinion: false,
                stateRecord: false,
                statePostDispatch: false,
                stateTalkBeforeAppointment: false,
                stateTalkHonestGovernment: false,
                stateDeclare: false
              }
              this.steps2 = {
                id: '',
                stateCandidateReport: '',
                stateCadreArchives: '',
                statePersonalMatters: '',
                stateSolicitingOpinions: '',
                stateClueReporting: '',
                stateRecommend: '',
                stateExamination: '',
                stateDecisionMeeting: '',
                statePublicity: '',
                stateManageOpinion: '',
                stateRecord: '',
                statePostDispatch: '',
                stateTalkBeforeAppointment: '',
                stateTalkHonestGovernment: '',
                stateDeclare: ''
              }
              if (!this.readonly) {
                this.getStepByType()
              }
            } else {
              let allState = response.data.result
              for (let item in allState) {
                this.steps2[item] = allState[item]
                if (allState[item] === -1) {
                  this.steps[item] = false
                } else {
                  this.steps[item] = true
                }
              }
            }
            this.showstepLoading = false
          }
        })
        .catch(error => {
          this.showstepLoading = false
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    getStepByType () {
      this.showstepLoading = true
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/busChangeTemplate/getByType?type=` + this.changeType)
        .then(response => {
          if (response.data.success) {
            this.steps = response.data.result
            this.showstepLoading = false
          }
        })
        .catch(error => {
          this.showstepLoading = false
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    selectStepSubmit () {
      let para = this.steps
      this.submitLoading = true
      para.id = this.personId
      this.$http
        .post(this.$http.defaults.selectionAPI + `api/selection/busCandidatePerson/submitStepStates`, para)
        .then(response => {
          this.submitLoading = false
          if (response.data.success) {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.$emit('closeDialog')
          } else {
            this.$message({
              message: '保存失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.submitLoading = false
          console.log(error)
          this.$message({
            message: '网络保存失败:' + error,
            type: 'error'
          })
        })
    }
  }
}
</script>

<style>

 #selectStep .mytable{
    border-top: 1px solid #74a6cc;
    border-left: 1px solid #74a6cc;
    margin:0 10px 10px;
    width: calc(100% - 20px);
    font-size:var(--size) !important;
  }
 #selectStep .mytable th{
    padding: 15px 0;
    border-right: 1px solid #74a6cc;
    border-bottom: 1px solid #74a6cc;
    line-height: 150%;
    background: #FAFAFA;
    text-align:center;
  }
 #selectStep .mytable td{
    padding: 5px;
    border-right: 1px solid #74a6cc;
    border-bottom: 1px solid #74a6cc;
    line-height: 150%;
  }
  #selectStep .state_icon{
    width: 30px;
    height: 30px;
    background-position: center center;
    background-repeat: no-repeat;
    float: center;
    display: block;
    cursor: pointer;
    margin:0 auto;
  }
</style>
